<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import useUserInfo from '@/stores/userInfo';
import getCode from '@/utils/randomCode';
import { initFrontEndControlRoutes } from '@/utils/permission';
import { useLogin } from '@/api/login';
import type { FormRules, FormInstance } from 'element-plus';
import type { IUser } from '@/api/login/type';

const router = useRouter();
// 用户信息
const stores = useUserInfo();
const { userInfo } = storeToRefs(stores);

// form 实例
const formRef = ref<FormInstance>();
// btnLoading
const btnLoading = ref(false);
const btnLoadingTitle = '登录中';

// 登录信息
const loginInfo: IUser = reactive({
	name: 'admin',
	password: '123456',
});

// 随机验证码
const code = ref<string>();
const randomCode = ref<string>('');
const handleCode = () => {
	code.value = randomCode.value = getCode();
};
handleCode();

// 密码是否可见
const isPassword = ref(false);
const setIsPassword = () => {
	isPassword.value = !isPassword.value;
};

// 验证规则
const rules = reactive<FormRules>({
	name: [
		{
			required: true,
			message: '请填写登录用户名称~',
			trigger: 'blur',
		},
		{
			min: 3,
			max: 9,
			message: '用户名长度在3-9位~',
			trigger: 'blur',
		},
	],
	password: [
		{
			required: true,
			message: '请输入登录密码~',
			trigger: 'blur',
		},
		{
			min: 3,
			max: 12,
			message: '密码长度在3-12位~',
			trigger: 'blur',
		},
	],
});

// 点击登录
const onSubmit = () => {
	// 验证是否通过正则
	formRef.value?.validate(async isOk => {
		// 未通过跳出
		if (!isOk) return;
		// 验证码是否正确
		if (code.value !== randomCode.value) throw new Error('验证码错误,注意大小写');
		// 开启loading
		btnLoading.value = true;
		// 请求登录接口
		try {
			userInfo.value = await useLogin(loginInfo);
		} catch (err) {
			throw new Error('登录未知异常,请联系开发人员');
		} finally {
			btnLoading.value = false;
		}
		initFrontEndControlRoutes();
		router.push('/');
	});
};
</script>

<template>
	<el-form ref="formRef" :model="loginInfo" :rules="rules" @keyup.enter="onSubmit">
		<el-form-item class="login-animation1" prop="name">
			<el-input v-model="loginInfo.name" clearable>
				<template #prefix>
					<i class="iconfont icon-yonghu"></i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2" prop="password">
			<el-input v-model="loginInfo.password" :type="isPassword ? 'text' : 'password'">
				<template #prefix>
					<i class="iconfont icon-kaisuo"></i>
				</template>
				<template #suffix>
					<i :class="`password iconfont icon-${isPassword ? 'biyan' : 'yanjing'}`" @click="setIsPassword"></i>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation3">
			<el-input v-model="code" clearable>
				<template #prefix>
					<i class="iconfont icon-zhifeiji"></i>
				</template>
			</el-input>
			<span class="login-content-code" @click="handleCode()">{{ randomCode }}</span>
		</el-form-item>
		<el-form-item v-btn-loading:[btnLoadingTitle]="btnLoading" class="submitBtn login-animation4" @click="onSubmit()">
			登录
		</el-form-item>
	</el-form>
</template>

<style lang="less" scoped>
@import url('./index.less');
</style>
